import React, { useState } from "react";
import tj1 from "../../assets/1.png";
import tj2 from "../../assets/2.png";
import tj3 from "../../assets/3.png";

function Style() {
  const tj = [
    {
      id: 1,
      img: tj1,
      text: "推荐1",
      title: "好评",
    },
    {
      id: 2,
      img: tj2,
      text: "推荐2",
      title: "好评",
    },
    {
      id: 3,
      img: tj3,
      text: "推荐3",
      title: "好评",
    },
    {
      id: 4,
      img: tj1,
      text: "推荐4",
      title: "好评",
    },
    {
      id: 5,
      img: tj2,
      text: "推荐5",
      title: "新增评论",
    },
    {
      id: 6,
      img: tj3,
      text: "推荐6",
      title: "新增评论",
    },
    {
      id: 7,
      img: tj1,
      text: "推荐7",
      title: "新增评论",
    },
    {
      id: 8,
      img: tj2,
      text: "推荐8",
      title: "新增评论",
    },
    {
      id: 9,
      img: tj3,
      text: "推荐9",
      title: "差评",
    },
  ];
  console.log(tj);

  const [Data, setData] = useState(tj);
  const [addData, setaddData] = useState(tj);
  const shaixuan = (title) => {
    let newArr = [...Data];
    newArr = Data.filter((item) => item.title === title);
    setaddData(newArr);
  };
  console.log(Data);

  return (
    <div>
      <button onClick={() => shaixuan("好评")}>好评</button>
      <button onClick={() => shaixuan("差评")}>差评</button>
      <button onClick={() => shaixuan("新增评论")}>新增评论</button>
      {addData &&
        addData.map((item, index) => {
          return (
            <div key={index}>
              <img src={item.img} alt="" />
              <span>{item.text}</span>
              <span>{item.title}</span>
            </div>
          );
        })}
    </div>
  );
}

export default Style;
